<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .table {
            width: 600px;
            overflow: hidden;
            margin: 50px auto;
        }

        .table .item {
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: cadetblue;
        }

        .table .item input {
            width: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="table">
            <div class="tr">
                <div class="item">
                    <input type="checkbox" :checked="checkedAll" @change="setCheckedAll">全选
                </div>
                <div class="item">
                    商品名称
                </div>
                <div class="item">
                    价格
                </div>
                <div class="item">
                    数量
                </div>
                <div class="item">
                    小计
                </div>
                <div class="item">
                    操作
                </div>
            </div>
            <div class="tr" v-for="item in  list">
                <div class="item">
                    <input type="checkbox" v-model="item.checked">
                </div>
                <div class="item">
                    {{item.goodsname}}
                </div>
                <div class="item">
                    {{item.goodsprice}}
                </div>
                <div class="item">
                    <button v-show="item.goodsnum>1" @click="calc(item,-1)">-</button>
                    <input type="text" v-model="item.goodsnum">
                    <button @click="calc(item,1)">+</button>
                </div>
                <div class="item">
                    {{item.goodsnum* item.goodsprice}}
                </div>
                <div class="item" @click="delById(item.id)">
                    删除
                </div>
            </div>

            <div class="tr">
                <div class="item" @click="delAll">
                   批量删除
                </div>
                <div class="item">
                   
                </div>
                <div class="item">
                    
                </div>
                <div class="item">
                    数量的和
                </div>
                <div class="item">
                    价格的和
                </div>
                <div class="item">
                    
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            checkedAll: false,
            list: [{ id: 1, goodsname: "商品名称一", goodsprice: 100, goodsnum: 1, checked: false }, { id: 2, goodsname: "商品名称二", goodsprice: 100, goodsnum: 2, checked: false }, { id: 3, goodsname: "商品名称三", goodsprice: 100, goodsnum: 3, checked: false }]
        },
        watch: {
            list:{
                deep:true,
                handler(newList){
                    let  flag  = false;
                    if(newList.length){
                        flag  = newList.every(item=>item.checked);
                    }
                    this.checkedAll = flag;
                }
            }

        },
        methods: {
            calc(item, num) {//item是引用类型
                item.goodsnum = item.goodsnum + num;
            },
            delById(id) {
                this.list = this.list.filter(item => item.id !== id);
            },
            setCheckedAll(e) {
                // alert(e.target.checked);
                this.checkedAll = e.target.checked;
                this.list.forEach(item => {
                    item.checked = e.target.checked;
                })
            },
            delAll(){
               this.list  = this.list.filter(item=>!item.checked);
            }

        }
    })


</script>

</html>